<template>
  <div class="app-container">
    <el-alert title="系统仅记录1个月内的操作日志" :closable="false" type="warning" style="margin-bottom: 20px;" />
    <grid v-bind.sync="gridData" :loading="listLoading" :total="total" :table-height="($store.getters.tableHeight + 37)" :selection="can('article.delete')" @deleteSelection="deleteSelection" @getList="handleFilter">
      <template #title="{row}">
        {{ row.title }}1
      </template>
    </grid>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import waves from '@/directive/waves'

const calendarTypeOptions = [
  { key: 'CN', display_name: 'China' },
  { key: 'US', display_name: 'USA' },
  { key: 'JP', display_name: 'Japan' },
  { key: 'EU', display_name: 'Eurozone' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ArticleIndex',
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  props: {},
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        keyword: '',
        type: '',
        status: 0
      },
      tabIndex: '0',
      gridData: {
        columns: {
          timestamp: {
            name: '操作时间',
            width: '160px',
            align: 'left'
          },
          title: {
            name: '操作内容',
            align: 'left'
          },
          ip: {
            name: 'IP',
            width: 200
          },
          level: {
            name: 'Level',
            width: 100
          },
          operator: {
            name: '操作员',
            width: 150
          }
        },
        items: [],
        actionWidth: 100,
        searchHeight: 0,
        keyword: null,
        paginator: {
          page: 1,
          limit: 20,
          sort: '+id'
        }
      },
      calendarTypeOptions
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      this.listLoading = true
      const { data } = await fetchList(this.listQuery)
      this.gridData.items = data.items
      this.total = data.total
      this.listLoading = false
    },
    handleFilter() {
      this.gridData.items = []
      this.getList()
    },
    // 批量删除
    deleteSelection(rows) {
      console.log(rows)
    }
  }
}
</script>

<style lang="scss" scoped>
  .pagination-container {
    padding: 32px 16px 0;
  }
</style>
